<template>
  <a-descriptions size="small" :column="1" bordered>
    <a-descriptions-item :label="$t('346')">{{
      props.recordd.display["1"]
    }}</a-descriptions-item>
    <a-descriptions-item :label="$t('345')">
      {{ Utils.getUserName(props.recordd.display["2"]) }}
    </a-descriptions-item>
    <a-descriptions-item :label="$t('343')">{{
      props.recordd.display["0"]
    }}</a-descriptions-item>
    <a-descriptions-item
      v-for="item in lstDisplay"
      :key="item.key"
      :label="item.label"
    >
      <div v-if="item.type == 'FtModel' || item.type == 'FtModelSelf'">
        <a href="#InlineRecordDetail" @click="showInlineRecord(item.key)">
          {{ item.display }}</a
        >
        <RecordDetailViewer
          v-if="popInlineRecord.get(item.key) == true"
          :recordd="inlineRecordd.get(item.key)"
          :fields="inlineModelFields.get(item.key)"
        ></RecordDetailViewer>
      </div>
      <div v-else-if="item.type == 'FtFile'">
        <FileDisplayer
          :file-key="item[item.key + 'fkey']"
          :file-name="item[item.key + 'fname']"
        ></FileDisplayer>
      </div>
      <pre v-else>{{ item.display }}</pre>
    </a-descriptions-item>
  </a-descriptions>
</template>
<script setup>
import { reactive, watch } from "vue";
import CommonDefine from "@/component/CommonDefine";
import Utils from "@/component/Utils";
import FileDisplayer from "@/component/field/FileDisplayer.vue";

const props = defineProps({ recordd: Object, fields: Array });
const lstDisplay = reactive([]);
const popInlineRecord = reactive(new Map());
const inlineRecordd = reactive(new Map());
const inlineModelFields = reactive(new Map());

// 展示嵌套记录的详情
const showInlineRecord = (fieldId) => {
  let field = props.fields.find((f) => f.id == fieldId);
  let pModelId = field.fieldType.C.provider;
  // console.log(props.recordd.record);
  let pRecordId = props.recordd.value[fieldId.toString()].C;
  CommonDefine.apiGetArm(
    `/api/v1/record/load/${pModelId}/${pRecordId}`,
    (d) => {
      inlineRecordd.set(fieldId, d);
      CommonDefine.runWithFieldCache(pModelId, (fields) => {
        inlineModelFields.set(fieldId, fields);
        popInlineRecord.set(fieldId, true);
      });
    }
  );
};

watch(
  () => props.recordd,
  (newValue) => {
    CommonDefine.clearArray(lstDisplay);
    popInlineRecord.clear();
    inlineRecordd.clear();
    inlineModelFields.clear();
    props.fields.forEach((field) => {
      // console.log(field);
      // if (field.fieldType.T == "FtUserId") {
      //   recordd.display[field.id.toString()] = Utils.getUserName(
      //     recordd.value[field.id.toString()].C
      //   );
      // }
      let item = new Object();
      const fid = field.id.toString();
      if (newValue.display[fid]) {
        item = {
          key: field.id,
          type: field.fieldType.T,
          label: field.label,
          display: newValue.display[fid],
        };
      } else if (newValue.value[fid]) {
        item = {
          key: field.id,
          label: field.label,
          type: field.fieldType.T,
          display: newValue.value[fid].C,
        };
      }
      if (field.fieldType.T == "FtFile") {
        if (
          newValue.value[fid] != undefined &&
          newValue.value[fid].T == "S401"
        ) {
          item[field.id + "fkey"] = newValue.value[fid].C.v;
          item[field.id + "fname"] = newValue.value[fid].C.d;
        }
      }
      // 有单位，加上单位展示
      if (
        CommonDefine.useful(field.fieldType.C) &&
        CommonDefine.useful(field.fieldType.C.unitLabel)
      ) {
        item.display += "(" + field.fieldType.C.unitLabel + ")";
      }
      lstDisplay.push(item);
    });
  },
  {
    immediate: true,
  }
);
</script>
